<template>
  <view>
    <view class="endTitle">
      <view
          v-for="(item, index) in items"
          :key="index"
          :class="{ btna: btnnum == index }"
          @tap="change(index)"
      >
        <view class="titleText">
          {{ item }}
        </view>
      </view>
    </view>
    <view class="endCont" :class="{ dis: btnnum === 0 }">
      <sui-detail
          ref="suidetail"
          :title="title"
          :category_name="category_name"
          :description="description"
          :take-pic-list="takePicList"
          :video-list="videoList"
          v-if="btnnum === 0"
      ></sui-detail>
    </view>
    <view class="endCont" :class="{ dis: btnnum === 1 }">
      <feed-submit
          v-if="(audit_status === 2 || audit_status === 3) && show_submit_btn"
          ref="feedsubmit"
          :content_id="content_id"
          :audit_status="audit_status"
          :take-pic-list="fdPicList"
          :video-list="fdVideos"
          :fd_description="fd_description"
      ></feed-submit>
      <feed-detail
          v-else-if="(audit_status === 2 || audit_status === 3) && !show_submit_btn"
          ref="feeddetail"
          :content_id="content_id"
          :take-pic-list="fdPicList"
          :video-list="fdVideos"
          :fd_description="fd_description"
          :audit_status="audit_status"
          :fail_reason="fail_reason"
      ></feed-detail>
      <feed-detail
          v-else
          ref="feeddetail"
          :content_id="content_id"
          :take-pic-list="fdPicList"
          :video-list="fdVideos"
          :fd_description="fd_description"
          :audit_status="audit_status"
          :fail_reason="fail_reason"
      ></feed-detail>
    </view>
<!--    <block v-for="(item,index) in idList" :key="index">
      <canvas
          :canvas-id="item.suiId"
          style="height: 100%; width: 100%; border:1rpx solid red;position: absolute; top: -1000rpx; left: -1000rpx"
      ></canvas>
      <canvas
          :canvas-id="item.feedId"
          style="height: 100%; width: 100%; border:1rpx solid red;position: absolute; top: -2000rpx; left: -2000rpx"
      ></canvas>
    </block>-->
  </view>
</template>

<script>
import suiDetail from "../suishoupai/suiDetail.vue";
import feedSubmit from "../suishoupai/feedSubmit.vue";
import feedDetail from "../suishoupai/feedDetail.vue";
import {checkToken} from "../../../common/api/common";
import {contentInfo} from "../../../common/api/suishoupai";

export default {
  name: "MyPaiAndFb",
  components: {
    suiDetail,
    feedSubmit,
    feedDetail,
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async onLoad(options) {
    // 检查Token是否过期
    checkToken();
    let _self = this;
    if (options.encodedData !== "undefined") {
      _self.content_id = _self.$Router.extract(options).content_id
      const _titleName = _self.$Router.extract(options).titleName ? _self.$Router.extract(options).titleName : ''
      if (_titleName) {
        uni.setNavigationBarTitle({
          title: _titleName,
        });
      }
      // console.log('debug----', _self.content_id)
      let res = await contentInfo({content_id: _self.content_id})
      // console.log('myPaiAndFb onload--', res)
      _self.audit_status = res.audit_status

      if(res.feed_user_id === uni.getStorageSync('_userInfo').admin_user_id) {
        _self.show_submit_btn = true
      }
      _self.content_id = res.content_id;
      _self.title = res.name;
      _self.category_name = res.category_name;
      _self.description = res.description;
      _self.fd_description = res.fd_description;
      _self.fail_reason = res.fail_reason;
      // 用canvas将随手拍图片重新画入
      /*if (res.imgs.length > 0) {
        res.imgs.forEach((element, index) => {
          console.log("ddddddddddd");
          _self.canvasdraw(res, element, 'suishoupai', index)
        });
      }
      _self.takePicList = _self.tmpPicList;*/
      _self.takePicList = res.imgs;
      _self.videoList = res.videos;
      // 用canvas将反馈图片重新画入
      /*if (res.fd_imgs.length > 0) {
        res.fd_imgs.forEach((element, index) => {
          _self.canvasdraw(res, element, 'feedback', index)
        })
      }
      _self.fdPicList = _self.tmpFdPicList;*/
      _self.fdPicList = res.fd_imgs;
      _self.fail_reason = res.fail_reason;
      _self.fdVideos = res.fd_videos;
      _self.$nextTick(() => {
        if (_self.$refs.suidetail) {
          // console.log("eeeeeeeee", _self.takePicList);
          _self.$refs.suidetail.$data.title = _self.title;
          _self.$refs.suidetail.$data.description = _self.description;
          // setTimeout 为了canvas    zhidazhou 2021-09-26
          // setTimeout(() => {
            _self.$refs.suidetail.init();
          // }, 1000)
        }
      });
      if (_self.audit_status === 3) {
        _self.$nextTick(() => {
          if (_self.$refs.feedSubmit) {
            // setTimeout 为了canvas    zhidazhou 2021-09-26
            // setTimeout(() => {
              self.$refs.feedsubmit.init();
            // }, 1000)
          }
        });
      } else if (_self.audit_status === 0 || _self.audit_status === 1) {
        // console.log('eeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
        _self.$nextTick(() => {
          if (_self.$refs.suidetail) {
            _self.$refs.suidetail.$data.fd_description = _self.fd_description;
            _self.$refs.suidetail.$data.fail_reason = _self.fail_reason;
          }
          if (_self.$refs.feeddetail) {
            _self.$refs.feeddetail.init();
          }
        });
      }

    }
  },
  // 定义属性
  data() {
    return {
      btnnum: 0,
      items: ["随手拍内容", "反馈与审核"],
      idList: [
        {
          suiId: 'firstCanvas0',
          feedId: 'firstCanvasFd0'
        },
        {
          suiId: 'firstCanvas1',
          feedId: 'firstCanvasFd1'
        },
        {
          suiId: 'firstCanvas2',
          feedId: 'firstCanvasFd2'
        },
        {
          suiId: 'firstCanvas3',
          feedId: 'firstCanvasFd3'
        },
        {
          suiId: 'firstCanvas4',
          feedId: 'firstCanvasFd4'
        }
      ],
      tmpPicList: [],
      tmpFdPicList: [],
      takePicList: [],
      videoList: [],
      title: "",
      category_name: "",
      description: "",
      fdPicList: [],
      fdVideos: [],
      fd_description: "",
      fail_reason: "",
      content_id: 0,
      // 如果反馈人和随手拍提交是同一人，则为true；否则是false
      show_submit_btn: false,
      audit_status: 1000,
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  methods: {
    canvasdraw(res, element, type, index) {
      // console.log('canvasdraw---', index)
      let _self = this
      uni.getImageInfo({
        src: element.url,
        success: ({width, height}) => {
          // console.log('canvasdraw---', width, height)
          width = width > 750 ? width / 2 : width
          height = height > 1400 ? height / 2 : height
          _self.download(element.url).then((res1) => {
            // console.log("2222222222", element, res1);
            let ctx
            if (type === 'suishoupai') {
              switch (index) {
                case 0:
                  index = 'firstCanvas0'
                  break
                case 1:
                  index = 'firstCanvas1'
                  break
                case 2:
                  index = 'firstCanvas2'
                  break
                case 3:
                  index = 'firstCanvas3'
                  break
                case 4:
                  index = 'firstCanvas4'
                  break
              }
            } else {
              switch (index) {
                case 0:
                  index = 'firstCanvasFd0'
                  break
                case 1:
                  index = 'firstCanvasFd1'
                  break
                case 2:
                  index = 'firstCanvasFd2'
                  break
                case 3:
                  index = 'firstCanvasFd3'
                  break
                case 4:
                  index = 'firstCanvasFd4'
                  break
              }
            }
            ctx = uni.createCanvasContext(index);
            ctx.drawImage(res1, 0, 0, width, height);
            ctx.setFillStyle("red");
            ctx.setFontSize(14)
            ctx.fillText("拍摄点：" + res.latitude + "," + res.longitude, 10, 50);
            ctx.fillText("上报时间：" + res.create_time, 10, 70);
            ctx.draw(false, (function () {
                  // console.log("333333");
                  setTimeout(() => {
                    uni.canvasToTempFilePath({
                      canvasId: index,
                      success: (res2) => {
                        // console.log("4444444444", res2.tempFilePath); //这里获取加了水印的图片信息
                        if (type === 'suishoupai') {
                          _self.tmpPicList.push({
                            suiId: index,
                            canvasPath: res2.tempFilePath,
                            ...element
                          });
                        } else {
                          _self.tmpFdPicList.push({
                            feedId: index,
                            canvasPath: res2.tempFilePath,
                            ...element
                          })
                        }
                      },
                      fail: (e) => {
                        // console.log(e);
                      },
                    });
                  }, 600);
                })()
            );
          });
        },
        fail: (error) => {
        },
      });

    },
    async download(url) {
      // console.log('wwwwww', url);
      // let url = encodeURI("http://127.0.0.1/2021会议记录.pdf"); //注意中文文件名的网络地址需要encodeURI
      return new Promise((resolve) => {
        uni.downloadFile({
          url, //文件链接
          success: function (res) {
            //statusCode状态为200表示请求成功，tempFIlePath临时路径
            if (res.statusCode == 200) {
              // console.log("ccc", res.tempFilePath);
              resolve(res.tempFilePath);
              //保存到本地
              /* uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: function(res) {
                //res.savedFilePath文件的保存路径
                //保存成功并打开文件
                uni.openDocument({
                  filePath: res.savedFilePath,
                  success: (res) => console.log("成功打开文档"),
                });
                console.log("bbb", res);
              },
              fail() {
                console.log("打开失败");
              },
            }); */
            }
          },
          fail() {
            // console.log("下载失败");
          },
        });
      });
    },
    change(e) {
      this.btnnum = e;
    },
  },
};
</script>

<style lang="scss" scoped>
/* 将三个内容view的display设置为none(隐藏) */
.endTitle {
  display: flex;
}

.endTitle view {
  flex-grow: 1;
  // justify-content: space-between;
  margin: 5 rpx 20 rpx;
  text-align: center;
  border-radius: 30%;
}

.endCont {
  display: none;
  background: #c8c7cc;
}

.btna {
  color: #ffffff;
  // background-color: #2979ff;
  background-image: linear-gradient(90deg, #2979ff 0%, #8bc6ec 100%);
}

.dis {
  display: block;
  height: 100vh;
}
</style>
